body { font: 14pt helvetica; width: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; height: 100%; width: 100%;}
#cytoscape { position: absolute; left: 0; right: 19.5em; top: 0; bottom: 0; }
#commands { padding: 0.25em; width: 25em; z-index: 3; position: absolute; right: 0; top: 0; bottom: 0; overflow: auto; font-size: 0.75em; line-height: 1; background: rgba(200, 200, 200, 0.5); border-radius: 0.333em; }
#commands h2 { margin-top: 1em; font-size: 1.25em; }
#nodes-number, #edges-number, #parent-node { width: 5em; }
.ui-tooltip { font-size: 0.75em; max-width: 400px; }
#string-stylesheet { display: block; min-height: 7em; width: 22em; }
#hide-commands { position: fixed; right: 0; top: 0; }
#commands-show-area { z-index: 2; position: absolute; right: 0; top: 0; font-size: 0.75em; }
#show-commands { position: fixed; right: 0; top: 0; }
#show-commands, #hide-commands { width: 3em; }
#bb { position: absolute; left: 0; top: 0; background: rgba(0, 255, 255, 0.333); z-index: 999999999; pointer-events: none; }
#note { z-index: 999999; cursor: pointer; display: none; position: fixed; right: 0; top: 0; margin: 1em; padding: 1em; width: 15em; background: rgba(0,0,0,0.8); color: #fff; border-radius: 1em; font-size: 0.8em; }
#note-descr { margin-top: 0.5em; font-size: 0.8em; }
#cytoscape.full { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

@media screen and ( max-width: 889px ){
  body:not(.commands-shown) #commands { display: none; }
  body:not(.commands-shown) #cytoscape { right: 0; }
}

@media screen and ( min-width: 900px ){
  body.commands-hidden #commands { display: none; }
  body.commands-hidden #cytoscape { right: 0; }
}

body.commands-shown #commands { display: block !important; }
body.commands-shown #cytoscape { right: 15.5em !important; }
